<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="../common_head.jsp" %>

	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>

<body>
 
<%@include file="../common_nav.jsp" %>
<!--main-->
<div class="w-1200 margin-0-auto" id="vue-el">
	<input type="hidden" id="logined" value="${currentUser.id }" />
	<div class="ogmall_online">
    	<input type="hidden" id="communityId" value="${c.id }"/>
    	<input type="hidden" id="houseTypeId" value="${ht.id }"/>
    	<input type="hidden" id="houseStyleId" value="${hs.id }"/>
    	<input type="hidden" id="houseStyleImage" value="${houseStyleImage }" />
    	
    	<div class="t"><b>楼盘：</b><span>${c.name }</span><b>户型：</b><span>${ht.name }</span><b>风格：</b><span id="style">${hs.name }</span></div>
        <div class="title" id="top_fixed">创建方案</div>
        <!--<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank5"></div>-->
        <ul class="left_nav">
        	<li v-for="(room,index) in rooms" :class="current == room.id?'on':'' " v-on:click="scrollTo(index)">{{room.name}}</li>
            <add-comp v-on:additem="addItem"></add-comp>
        </ul>
        <div class="blank10"></div><div class="blank10"></div>
        <!--left-->
        <div class="left_pz">
        	<h1>配置单</h1>
            <dl>
            	<template v-for="room in rooms">
                	<config-comp v-bind:room="room" :rid="room.id"  v-on:changeitem="onChangeIndex"></config-comp>
                </template>
            </dl>
            <div class="total">
            	<div class="fl">共计{{total}}项</div>
                <div class="fr">合计<b>￥{{totalPrice}}</b></div>
            </div>
            <div class="release">
            	<h2>方案名称：</h2>
                <input name="" type="text" class="input" id="design-name">
                <h2>选用面积：</h2>
                <input name="" type="text" class="input" id="area">
                <input name="" type="button" value="返回" class="btn1">
                <input name="" type="button" value="发布" class="btn2" onclick="save(true)">
                <!-- 
                <input name="" type="button" value="保存" class="btn3" onclick="save(false)">
                 -->
            </div>
        </div>
        <!--left END-->
        <!--right-->
        <!--刷选-->
        <div class="right_list">
            <div class="choice">
                <div class="tit">
                	<h2>请选择<b>家具</b></h2>
                    <div class="search">
                        <input name="" type="text" class="t" v-model="searchTerm" placeholder="请输入编码或产品名" onfocus="if(value=='请输入编码或产品名') {value=''}" onblur="if (value=='') {value='请输入编码或产品名'}"/>
                        <input name="" type="button" class="search_icon">
                    </div>
                </div>
                <div class="lb">
                <em>推荐品牌：</em>
                <span><a href="javascript:void(0);" class="on" v-on:click="brandId = null">全部</a></span>
                <ul>
                    <li v-for="b in brands">
                    	<a href="javascript:void(0);" v-bind:class="brandId == b.id ? 'on' : ''" v-on:click="updateBrand(b.id)">{{b.name }}</a>
                    </li>
                </ul>
                </div>
                <div class="lb">
                <em>价钱区间：</em>
                <span><a href="#" class="on" v-on:click="priceId = null">全部</a></span>
                <ul>
                    <li v-for="p in prices">
                    <a href="javascript:void(0);" v-bind:class="priceId == p.id ? 'on' : ''" v-on:click="priceId = p.id">{{p.min}} {{p.max ? '-' + p.max : '以上'}}</a>
                    </li>
                </ul>
                </div>
                <div class="boxdown"><i>显示更多选项<b>∨</b></i></div>
            </div>
        
        <!--刷选 END-->
        <div class="blank10"></div><div class="blank10"></div>
        <!--list-->
        <div class="top_choice">
        	<ul>
            	<li><a href="javascript:void(0);" v-bind:class="orderBy=='p.totalSold desc' ? 'on' : ''"  v-on:click="orderBy='p.totalSold desc'">最热门</a></li>
                <li><a href="javascript:void(0);" v-bind:class="(orderBy=='sellingPrice desc' || orderBy == 'sellingPrice asc')? 'on' : ''" v-on:click="orderBy=='sellingPrice desc' ? orderBy='sellingPrice asc' : orderBy='sellingPrice desc'">价格&nbsp; <span v-if="orderBy=='sellingPrice desc'">↓</span>
                <span  v-if="orderBy=='sellingPrice asc'">↑</span></a></li>
                <li><a href="javascript:void(0);" v-bind:class="orderBy=='p.lastUpdateTime desc' ? 'on' : ''" v-on:click="orderBy='p.lastUpdateTime desc'">最新</a></li>
            </ul>
            <div class="r" v-if="products.totalRecords && products.totalRecords > 0">共<i>{{products.totalRecords}}</i>款产品&nbsp;&nbsp;
            <b v-if="page > 1" v-on:click="page = page - 1"><</b>
            {{page}}/{{products.totalPages}}
            <b v-if="page < products.totalPages" v-on:click="page = page + 1">></b>
            </div>
        </div>
        <div class="pro_list">
        	<ul v-if="products.data">
            	<li v-for="p in products.data">
                	<div class="img"><a v-bind:href="'${ctx }/product/detail?id=' + p.id" target="_blank"><img v-bind:src="p.specs[p.specIndex].image"></a></div>
                    <div class="l1">
                    	<h2><a v-bind:href="'${ctx }/product/detail?id=' + p.id" target="_blank">{{p.name}}</a></h2>
                        <p><em>风格：</em>{{p.specs[p.specIndex].style}}<br><em>材质：</em>{{p.specs[p.specIndex].material}}<br><em>颜色：</em>{{p.specs[p.specIndex].color}}</p>
                    </div>
                    <div class="l2">规格：</div>
                    <div class="l3">
                    	<p v-for="(s,idx) in p.specs" v-bind:class="idx == p.specIndex ? 'on' : ''" v-on:click="p.specIndex = idx">{{s.spec1}}</p>
                    </div>
                    <div class="l4">
                    	<p>￥{{p.specs[p.specIndex].realPrice}}</p>
                        <a href="javascript:void(0);" class="pro_btn" v-bind:data-id="p.specs[p.specIndex].id" onclick="addProduct(this)">+加入配置单</a>
                    </div>
                </li>
            </ul>
            <p v-if="noProduct" style="color: black;text-align: center;font-size: 15px;">当前条件下无产品</p>
            <p v-if="loading" style="color: black;text-align: center;font-size: 15px;">加载中...</p>
        </div>
        <!--list END-->
        <!--page-->
        	<div class="ogmall_page" v-if="products.totalRecords && products.totalRecords > 0">
        		<a href="javascript:void(0);" v-if="page > 1" v-on:click="page = page - 1">上一页</a>
					{{page}}/{{products.totalPages}}
        		<a href="javascript:void(0);" v-if="page < products.totalPages" v-on:click="page = page + 1">下一页</a>
        		</div>
        <!--page END-->
        </div>
        <!--right END-->
    </div>
</div>
<!--main END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="bottom-warp w-100p">
     <%@include file="../foot.jsp" %>
</div>
<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx}/js/item-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/config-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/add-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/main.js"></script>
<script type="text/javascript">
/*	$(function(){
		var scrollDir = 'down',lastScrollTop = $(window).scrollTop();
		var viewHeight = $(window).height(); //获取视窗高度
		$(window).scroll(function(event){
			viewHeight = $(window).height();
			var ling = $(window).scrollTop();
			var ct = ling - lastScrollTop;
			if(ling > ($('#top_fixed').offset().top-viewHeight)){
				$('.left_nav').show();

				if($('#top_fixed').offset().top>ling){
					var top = $('#top_fixed').offset().top-ling+52;
					if(top <20){
						top =20;
					}
					$('.left_nav').css({top:top+'px'})
				}else{
					$('.left_nav').css({top:0+'px'})
				}
				
			}else{
				$('#ogmall_left_nav').hide();
				fixed = false;
			}
			lastScrollTop = ling;
		})
	})	*/
</script>
<script type="text/javascript">
$(document).ready(function(){
	var a =$(".choice div:gt(3):not(:last)");
		a.hide();
	$(".boxdown").click(function(){
		if(a.is(':visible')){
			 a.slideUp('fast');
			 $(this).html('<i>显示更多选项<b>∨</b></i>');
		}else{
			a.slideDown('fast').show();	
			$(this).html('<i>隐藏更多选项<b>∧</b></i>');
		}			
	});
});
$(document).ready(function(e) {
    $(".ogmall_online .right_list .pro_list ul li .l3 p").click(function(){
	$(this).addClass("on").siblings().removeClass("on");
	});
});
</script>
<!--
<script src="js/design.js" type="text/javascript"></script>-->
</body>
</html>
